<template>
    <div class="ma-content-block lg:flex justify-between">
      <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
        <template #isTop="{record}">
          <a-tag color="green" v-if="record.state == 1">{{ '是' }}</a-tag>
          <a-tag color="magenta" v-else>{{ '否' }}</a-tag>
        </template>
        <template #url="{record}">
         <a-button type="outline" size="mini" v-copy="`https://shop.warrenslove.co/h5/#/pages/my/content?id=${record.id}`">复制</a-button>
        </template>
      </sa-table>
      <!-- 编辑表单 -->
      <edit-form ref="editRef" @success="refresh" />
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, reactive, computed } from 'vue'
  import infoApi from '@/api/message/info'
  import { Message } from '@arco-design/web-vue'
  import { throttle } from 'lodash';
  import EditForm from './edit.vue'
  import SaTable from '@cps/sa-table/index.vue'
  const crudRef = ref()
  const editRef = ref()
  const searchForm = ref({
   
  })
  const deleteForm = ref({ //刪除 确认彈窗
  id: '',
  pay_password: '',
})
  const options = reactive({
    api: infoApi.infoList,//表格数据接口
    operationColumnWidth: 200,//操作欄
    showSearch:false,
    columnAlign: 'center',
    pageSimple: false,//是否展示操作欄有 以及工具欄
    isTreeTable:false,
    add: {//頂部新增按鈕
      show: true,
      auth: ['/core/menu/save'],
      func: async () => {
        editRef.value?.open()
      },
    },
    edit: {//操作欄编辑按鈕
      show: true,
      auth: ['/core/menu/update'],
      func: async (record) => {
        editRef.value?.open('edit',record.id)
        editRef.value?.setFormData(record)
      },
    },
    delete: {//操作欄和頂部刪除按鈕
      show: true,
      auth: ['/core/menu/destroy'],
      func: throttle(async (params) => {
      deleteForm.value.id = params.ids[0]
      const { data } = await infoApi.delInfo(deleteForm.value)
      Message.success(`刪除成功`)
      refresh()
    }, 2000)
    },
    isExpand: false,//展開所有子樹
  })
  const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: '名称', dataIndex: 'title', width: 180 },
    { title: '类型', dataIndex: 'cate_text', width: 100 },
    { title: '排序', dataIndex: 'sort', width:100 },
    { title: '置頂', dataIndex: 'isTop', width: 100 },
    { title: 'URL', dataIndex: 'url', width: 100 },
    { title: '创建时间', dataIndex: 'create_time', width: 180 },
    { title: '修改时间', dataIndex: 'update_time', width: 180 },
  ])
  
  const initPage = async () => { 
    
  }
  const refresh = async () => {
    crudRef.value?.refresh()
  }
  onMounted(async () => {
    initPage()
    refresh()
  })
  </script>
  
  <style scoped>
  .icon {
    width: 1em;
  }
  </style>
  